<template>
	<view>
		<u-navbar title=" " :border-bottom="false">
			<view class="nav-title">
				<u-image :src="appletImgUrl+'vip-title.png'" width="228" height="50"></u-image>
			</view>
		</u-navbar>
		<view class="content">
			<view class="bg">
				<u-image :src="imageURL + 'USER/03ec9601-3fae-41e9-bdec-4f6a04f068c1.png'" width="100%" mode="widthFix"></u-image>
				<view class="title">尊贵的微谷会员</view>
				<view class="info">
					<u-image width="90" mode="aspectFill" height="90" shape="circle" borStyle="4rpx solid #FAD8B8" :src="userInfo.headPhoto"></u-image>
					<view class="box">
						<view class="">{{userInfo.userName}}</view>
						<view class="">
							<u-image :src="appletImgUrl+'vip-zs-icon.png'" width="40" height="40"></u-image>
							<text>{{userInfo.levelName}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="option">
				<view class="item-content" v-for="(item,index) in upgradeList" :key="index">
					<view class="item">
						<view class="item-box">
							<view class="">
								<view class="">{{item.name}}</view>
								<view class=""><text>￥</text>{{item.certifiedPrice}}</view>
							</view>
							<view :class="[item.isUp == 1 ? 'light' : 'disabled']" @click="upgrade(item)">{{item.isUp == 1 ? '开通' : '已升级'}}</view>
						</view>
					</view>
					<view class="bg-right">
						<u-image :src="appletImgUrl+'vip-footer-bg.png'" width="180" height="180"></u-image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {appletImgUrl} from "@/common/config.js"
	export default {
		data() {
			return {
				appletImgUrl:appletImgUrl,
				userInfo: '',
				upgradeList: [],
				imageURL: this.imageURL
			};
		},
		onLoad() {
			let userInfo = uni.getStorageSync('userInfo')
			let reg = new RegExp("(\\d{3})(\\d{4})(\\d{4})");
			userInfo.userName = userInfo.userName.replace(reg, "$1****$3")
			this.userInfo = userInfo

			this.updateUpgradeList()
		},
		methods: {
			updateUpgradeList() {
				this.$u.get('userservice/upLevelInfo').then(res => {
					this.upgradeList = res
				})
			},
			upgrade(item) {
				const self = this
				if (item.isUp == 1) {
					if (item.activeAreaId) {
						this.$u.post('userservice/upgralLevel', {
							level: item.level,
							payChannel: 'MINI_PAY'
						}).then(res => {
							let payStr = JSON.parse(res.payStr)
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: payStr.timeStamp,
								nonceStr: payStr.nonceStr,
								package: payStr.package,
								signType: payStr.signType, 
								paySign: payStr.paySign,
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
									uni.showToast({
										title: '支付成功！'
									})
									self.updateUpgradeList()
									self.$u.get('user/info').then(userInfo => {
										if (userInfo.headPhoto) {
											if (userInfo.headPhoto.indexOf("https") != 0) {
												userInfo.headPhoto = self.imageURL + userInfo.headPhoto
											}
										} else {
											userInfo.headPhoto = self.appletImgUrl+'logo.png'
										}
										uni.setStorageSync('userInfo', userInfo)
									})
								},
								fail: function(err) {
									uni.showToast({
										title: '支付失败',
										icon: 'none'
									})
								}
							});
						})
					} else {
						this.$u.route('/pages/user/upgradeVIP/upgradeVIP', {
							level: item.level
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.option {
		padding: 0 6%;

		.item-content {
			position: relative;
			padding-right: 20rpx;

			.bg-right {
				position: absolute;
				bottom: -40rpx;
				right: 0;
			}
		}

		.item {
			height: 140rpx;
			padding: 10rpx;
			margin-bottom: 40rpx;
			background-color: #FFFFFF;
			position: relative;
			z-index: 1;

			&:last-child {
				margin-bottom: 0;
			}

			.item-box {
				position: relative;
				background-color: #FFFFFF;
				z-index: 1;
				height: 100%;
				border: 1rpx solid #FAD8B8;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;

				>view {
					&.light {
						background: linear-gradient(90deg, #F4AE74, #FAC694);
					}

					&.disabled {
						color: gray;
						background-color: #ccc;
					}

					&:last-child {
						width: 160rpx;
						text-align: center;
						font-size: 28rpx;
						line-height: 60rpx;
						border-radius: 30px;
					}

					&:first-child {
						display: flex;
						align-items: center;

						view {
							&:first-child {
								font-size: 34rpx;
							}

							&:last-child {
								margin-left: 40rpx;
								color: #E7AC4E;

								text {
									font-size: 30rpx;
									font-weight: normal;
								}

								font-size: 60rpx;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}

	.bg {
		position: relative;

		.info {
			position: absolute;
			bottom: 17%;
			display: flex;
			align-items: center;
			left: 50%;
			transform: translateX(-70%);

			.box {
				color: #F8BC86;
				margin-left: 20rpx;

				>view {
					&:first-child {
						font-size: 37rpx;
					}

					&:last-child {
						display: flex;
						margin-top: 5rpx;
						align-items: center;

						text {
							font-size: 30rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		.title {
			position: absolute;
			width: 100%;
			top: 35.8%;
			color: #F8BC86;
			font-size: 30rpx;
			text-align: center;
		}
	}

	page {
		background-color: #F7F7F7;
	}

	.nav-title {
		width: 138px;
		position: absolute;
		left: 375rpx;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		// background-color: red;
	}
</style>
